<template>
	<scroll-view class="sally-tree-view-sc" :scroll-y="true">
		<view class="title-all" @click.stop="onClickLeve" :class="select_index==-1?'leve-main-sel' : ''">
			全部
		</view>
		<sallyTreeItem  :updateGrandpaData="updateGrandpaData" ref="treeItemRef" :config="config" :level="0" :list="treeList" @onChange="onChildCheckbox">
			<template v-slot:right="{scope}">
				<slot name="right" :scope="scope"></slot>
			</template>
		</sallyTreeItem>
	</scroll-view>
</template>

<script>
	import sallyTreeItem from "../sally-tree/sally-tree-item.vue"
	// import jiahao from "@/static/images/tiqianpi/jiahao.png"
	export default {
		name: "sally-tree",
		components: {
			sallyTreeItem
		},
		props: {
			updateGrandpaData:{
				type:Function,
				 required: true 
			},
			option: {
				type: Object,
				default: () => {}
			},
			parents: {
				type: Array,
				default: () => []
			},
			parentIds: {
				type: Array,
				default: () => []
			},

			list: {
				type: Array,
				default: () => []
			},


			multiple: { // 是否可以多选
				type: Boolean,
				default: false
				// default: true
			},
			selectParent: { //是否可以选父级
				type: Boolean,
				default: false
			},

			defaultIcon: { // 折叠时候的ic
				type: String,
				default: 'https://mcdn.chatgk.com/xcx/static/images/tiqianpi/jiahao.png'
			},
		},
		data() {
			return {
				select_index: null,
				showTree: false,
				treeList: this.list,
				selectIndex: -1,
				returnedItem: [], //定义一个空数组
				pids: [],
				ancestorsIds: [],
				childNums: [],
			}
		},
		watch: {
			list: {
				handler(newVal) {
					this.treeList = this.renderTreeList(newVal);
				},
				deep: true, // 是否深度监听
			}
		},
		computed: {
			type() {
				return this.config.type
			},

			config() {
				const {
					type,
					idKey,
					labelKey,
					multiple
				} = this.option
				return {
					type: type || 'radio',
					idKey: idKey || 'id',
					labelKey: labelKey || "label",
					multiple: multiple,
					defaultIcon: this.defaultIcon,
					checkboxPlacement: 'left' //选择框的位置，可选 left/right
				}
			}
		},
		mounted() {
			const selectIndex = uni.getStorageSync('select_index');
			if (selectIndex == -1) {
				this.select_index = -1

			} else {
				this.select_index = null
			}
		},
		methods: {
			onClickLeve() {
				this.select_index = -1
				this.$refs.treeItemRef.clearHighlight(this.treeList)
				uni.setStorageSync('select_index', this.select_index);
				let rowIndex = 0
				uni.$emit('leveUpdate', rowIndex);
				this.updateGrandpaData()
				
				// uni.navigateBack({
				// 	delta: 1
				// })
			},
			onForEach(list, parentIds) {
				list.forEach(item => {
					if (!parentIds.includes(item.id)) {
						item.checked = false;
						item.checkedStatus = item.checked == false ? 0 : 2;
						if (item.levels.length > 0) {
							this.onForEach(item.levels, parentIds)
						}
					} else {
						item.checked = true;
						item.checkedStatus = item.checked == false ? 0 : 2;
					}
				})

			},
			onForEach2(list, is = false) {
				const arr = []
				list.forEach(item => {
					// console.log(item.label, item, item.checkedStatus, item.checked, is, arr)
					if (item.checkedStatus != 0 || item.checked || is) {
						arr.push(item.id)
						if (item.levels.length > 0) {
							arr.push(...this.onForEach2(item.levels, !item.isLoaded))
						}

					}

				})
				return arr;
			},
			onChildCheckbox(citem, parents, parentIds) {
				console.log("点击的这里");
				let checkedIds = []
				if (!this.config.multiple) {
					console.log("点击的这里1");
					this.onForEach(this.treeList, [citem.id, ...parentIds])
					parents.forEach(item => {
						item.checked = true;
						item.checkedStatus = item.checked == false ? 0 : 2;
						checkedIds.push(item.id)
					})
					this.$emit('onChange', {
						curItem: citem,
						checkedIds
					});
				} else {
					console.log("点击的这里12");
					setTimeout(() => {
						checkedIds = this.onForEach2(this.treeList)
						this.$emit('onChange', {
							curItem: citem,
							checkedIds
						});
					}, 10);
				}


			},
			renderTreeList(list = [], rank = 0, parentIds = [], parents = []) {
				const arr = []
				const {
					idKey,
					labelKey
				} = this.config
				list.forEach(item => {
					let obj = {
						rowIndex: item.rowIndex,
						id: item[idKey],
						label: item[labelKey],
						source: item,
						parentIds, // 父级id数组
						parents, // 父级id数组
						rank, // 层级
						showChild: false, //子级是否显示
						open: false, //是否打开
						show: rank === 0, // 自身是否显示
						hideArr: [],
						orChecked: item.checked ? item.checked : false,
						checked: item.checked ? item.checked : false,
						checkedStatus: 0,
						childNum: 0,
						levels: item.levels || [],
						isLoaded: false, //是否加载过
					}
					obj.levels = this.renderTreeList(obj.levels, parentIds.length, [obj.id, ...parentIds], [
						obj, ...parents
					])
					arr.push(obj)
				})
				return arr;
			},
			onShowChild(item) {
				item.showChild = !item.showChild;
			}
		},

	}
</script>

<style scoped lang="less">
	.title-all {
		margin: 20rpx 0 20rpx 0;
	}

	.leve-main-sel {
		color: #FF3B0A;
	}

	@import "./style.less";
</style>